<!-- 首页 -->
<template>
	<view v-if="my == 'true'">
		<u-navbar title="推广上墙"></u-navbar>
		<u-notice-bar mode="horizontal" :list="list"></u-notice-bar>
		<view class="page-box">
			<view class="fabu-btn-box">
				<view class="clear-btn" @click="clearText">清空</view>
				<view :class="[form.title=='' ? 'btn-disabled' : 'fabu-btn']" @click="submit">发布</view>
			</view>
			<view class="text-box">
				<u-input v-model="form.title" placeholder="请填写标题" type="text" maxlength="50"></u-input>
			</view>
			<view class="img-label-box">
				<view class="icon-box">
					<u-icon name="scan"></u-icon>
				</view>
				<view class="img-label">请上传（个人/群二维码）</view>
			</view>
			<view class="upload-box">
				<u-upload :max-size="5 * 1024 * 1024" max-count="1" :action="action" :header="header" @on-success="onSuccess" @on-remove="onRemove"></u-upload>
			</view>
			<view>
				<view class="config-box">
					<view class="config-label-box">
						<view class="icon-box">
							<u-icon name="tags"></u-icon>
						</view>
						<view class="config-label">选择分类</view>
					</view>
					<view class="config-btn" @click="topciShow = true">
						<view>{{topic}}</view>
						<u-icon name="arrow-right"></u-icon>
					</view>
				</view>
				<view class="config-box">
					<view class="config-label-box">
						<view class="icon-box">
							<u-icon name="info-circle"></u-icon>
						</view>
						<view class="config-label">可进人数</view>
					</view>
					<view class="config-btn" @click="maxNumShow = true">
						<view>{{maxNumLabel}}</view>
						<u-icon name="arrow-right"></u-icon>
					</view>
				</view>
				<!-- <view class="config-box">
					<view class="config-label-box">
						<view class="icon-box">
							<u-icon name="woman"></u-icon>
						</view>
						<view class="config-label">女生人数</view>
					</view>
					<view class="config-btn">
						<view>不限</view>
						<u-icon name="arrow-right"></u-icon>
					</view>
				</view> -->
				<view class="config-box">
					<view class="config-label-box">
						<view class="icon-box">
							<u-icon name="star"></u-icon>
						</view>
						<view class="config-label">可进性别</view>
					</view>
					<view class="config-btn" @click="sexShow = true">
						<view>{{sexLabel}}</view>
						<u-icon name="arrow-right"></u-icon>
					</view>
				</view>
				<view class="config-box">
					<view class="config-label-box">
						<view class="icon-box">
							<u-icon name="rmb-circle"></u-icon>
						</view>
						<view class="config-label">是否收费</view>
					</view>
					<view class="config-btn" @click="payShow = true">
						<view>{{payLabel}}</view>
						<u-icon name="arrow-right"></u-icon>
					</view>
				</view>
			</view>
			
			<u-select v-model="topciShow" :list="topicList" @confirm="topicConfirm"></u-select>
			<u-select v-model="maxNumShow" :list="maxNumList" @confirm="maxNumConfirm"></u-select>
			<u-action-sheet :list="payList" v-model="payShow" @click="clickPay"></u-action-sheet>
			<u-action-sheet :list="sexList" v-model="sexShow" @click="clickSex"></u-action-sheet>
		</view>
		<coin-popup></coin-popup>
		<user-auth></user-auth>
		<user-phone></user-phone>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
export default {
	data() {
		var token = 'Bearer ' + uni.getStorageSync('token');
		var action = this.website.baseUrl + '/oss/oss/upload';
		return {
			background: {
				backgroundColor: '#fff',
			},
			list: [
				'请选择对应的分类',
				'图片和文字不能有色情',
				'广告',
				'微商等避免封号！！！',
			],
			topicList: [
				{
					value: '1',
					label: '江'
				},
				{
					value: '2',
					label: '湖'
				}
			],
			maxNumList: [
				{
					value: 20,
					label: '20'
				},
				{
					value: 50,
					label: '50'
				},
				{
					value: 100,
					label: '100'
				}
			],
			maxNumLabel: '请选择',
			payLabel: '用户免费查看',
			payList: [{
				text: '用户免费查看',
				color: 'green',
				fontSize: 28,
				subText: '发帖需要500趣豆',
				value: '0',
			}, {
				text: '用户付费查看',
				color: 'red',
				fontSize: 28,
				subText: '发帖免费',
				value: '1',
			}],
			sexLabel: '不限',
			sexList: [{
				text: '不限',
				value: '2',
			}, {
				text: '男',
				value: '0',
			}, {
				text: '女',
				value: '1',
			}],
			form: {
				uid: '',
				qunTopicId: null,
				title: '',
				maxNum: 0,
				sexCheck: '2',
				payCheck: '0',
				qrcodeImage: null,
			},
			sexShow: false,
			payShow: false,
			maxNumShow: false,
			topciShow: false,
			topic: '请选择',
			content: '',
			topicIds: '',
			// 演示地址，请勿直接使用
			action: action,
			header: {
				'Authorization': token
			},
			fileList: [],
			customStyle: {
				backgroundColor: '#606266', // 注意驼峰命名，并且值必须用引号包括，因为这是对象
			},
			hotTopicList: [],
			login: {
				appId: '',
				encryptedData: '',
				code: '',
				iv: ''
			},
			uid: '',
			userId: 0,
			my: 'false',
		};
	},
	onLoad(option) {
		var userId = uni.getStorageSync("userId");
		this.userId = userId;
		this.my = option.my;
	},
	mounted () {
		this.init();
	},
	methods: {
		init() {
			this.getUid();
			this.getHotTopicList();
		},
		onSuccess(e) {
			if(e.code == 200){
				var url = e.data;
				this.form.qrcodeImage = url;
				this.$u.toast('图片上传成功');
			}else{
				this.$u.toast(e.msg);
			}
		},
		onRemove(index) {
			this.form.qrcodeImage = null;
		},
		clearText() {
			this.content = '';
		},
		submit() {
			console.log(this.form);
			if(this.form.title == ''){
				return;
			}
			if(this.form.qrcodeImage == null){
				this.$u.toast('请上传二维码');
				return;
			}
			if(this.form.qunTopicId == null){
				this.$u.toast('请选择分类');
				return;
			}
			if(this.form.maxNum < 10){
				this.$u.toast('请选择可进人数');
				return;
			}
			this.judgeLogin((res) => {
				if(res.user.phonenumber == null || res.user.phonenumber == ''){
					this.$store.commit('setPhone', true);
					return;
				}
				
				this.addDynamic();
			});
		},
		topicConfirm(e) {
			this.topic = e[0].label;
			this.form.qunTopicId = e[0].value;
		},
		maxNumConfirm(e) {
			this.maxNumLabel = e[0].label;
			this.form.maxNum = e[0].value;
		},
		clickPay(e) {
			this.payLabel = this.payList[e].text;
			this.form.payCheck = this.payList[e].value;
		},
		clickSex(e) {
			this.sexLabel = this.sexList[e].text;
			this.form.sexCheck = this.sexList[e].value;
		},
		addVipDynamic() {
			var image = this.fileList.join(",");
			this.$u.post('/wq/qun/addVip',{
				uid: this.uid,
				message: this.content,
				topicIds: this.topicIds,
				image: image
			}).then(res => {
				this.$refs.uToast.show({
					title: '剩余'+res.data+'次',
					type: 'success',
					duration: 1000,
					isTab: true,
					url: '/pages/index'
				});
			});
		},
		addDynamic() {
			this.$u.post('/wq/qun/add', this.form).then(res => {
				this.$u.route({
					url: 'pages/index',
					params: {
						qunMore: 'true',
						id: this.form.qunTopicId,
					}
				});
			});
		},
		getHotTopicList() {
			this.$u.get('/wq/qunTopic/getList').then(res => {
				this.topicList = res.data;
			})
		},
		getUid() {
			this.$u.get('/wq/dynamic/getUid').then(res => {
				this.form.uid = res.msg;
			})
		},
		preSave(run) {
			this.$u.get('/wq/topic/getMoreTopic').then(res => {
				this.topicList = res.topicList;
				this.fansTopicList = res.fansTopicList;
				run(res);
			})
		},
	}
}; 
</script>
<style lang="scss" scoped>
	page {
		background-color: #fff;
	}
	.page-box {
		padding: 20px;
		padding-bottom: 140rpx;
	}
	.text-box {
		background-color: #f4f5f6;
		border-radius: 5px;
		margin: 15px 5px;
		padding: 2px 10px;
	}
	
	.btn-box {
		width: 50%;
		margin-bottom: 20px;
	}
	.tag-scroll-box {
		padding: 15px 5px;
	}
	.send-btn {
		width: 50%;
		background-color: #5082e5;
		color: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 10px 20px;
		border-radius: 20px;
		font-size: 12px;
	}
	.send-btn-text {
		margin-left: 5px;
	}
	.send-box {
		display: flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		width: 100%;
		bottom: 20px;
	}
	.fabu-btn-box {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 10px 5px;
		margin-top: 0;
	}
	
	.clear-btn {
		background-color: #f4f5f6;
		color: #606266;
		padding: 6px 20px;
		font-size: 12px;
		border-radius: 5px;
	}
	
	.fabu-btn {
		background-color: #5082e5;
		color: #fff;
		padding: 6px 20px;
		font-size: 12px;
		border-radius: 5px;
	}
	.btn-disabled {
		background-color: #c3aae9;
		color: #fff;
		padding: 6px 20px;
		font-size: 12px;
		border-radius: 5px;
	}
	.tip-info-box {
		padding: 0 5px;
	}
	.tip-info {
		padding: 10px;
		background-color: #f4f5f6;
		border-radius: 10px;
		font-size: 32rpx;
		color: red;
	}
	.config-box {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 20px 5px;
		margin-top: 0;
	}
	.config-btn {
		display: flex;
		align-items: center;
		color: #606266;
		font-size: 24rpx;
	}
	.config-label {
		font-weight: bold;
	}
	.img-label {
		font-weight: bold;
	}
	.config-label-box {
		display: flex;
		align-items: center;
	}
	.icon-box {
		background-color: #333333;
		border-radius: 100%;
		width: 40rpx;
		height: 40rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fff;
		margin-right: 5px;
		font-size: 24rpx;
	}
	.img-label-box {
		display: flex;
		align-items: center;
		margin-bottom: 10px;
		margin-left: 5px;
	}
	.upload-box {
		margin-bottom: 10px;
	}
	.pay-status {
		background-color: #ff9900;
		color: #fff;
		font-size: 20rpx;
		border-radius: 20px;
		padding: 3rpx 6px;
	}
	.red {
		background-color: red;
	}
</style>
